<script setup>
import { usePopupStore } from '../stores/popup.js'
import { useRoute } from 'vue-router'
import { useIconsStore } from '../stores/icons.js'
import SvgIcon from './SvgIcon.vue';

const iconsState = useIconsStore()
const popupState = usePopupStore()
const route = useRoute()

</script>

<template>
  <VarAppBar  color="linear-gradient(90deg, rgba(26, 47, 76,1) 0%, rgba(29, 50, 79,1) 100%)"  title-position="center" >
    {{ route.meta.title }}
    <template #left>
      <var-button round text color="transparent" text-color="#fff" @click="popupState.openPopup()">
        <var-icon name="menu" :size="24" />
      </var-button>
    </template>
    <template #right v-if="route.path === '/'">
      <var-button round text color="transparent" text-color="#fff" @click="iconsState.minMaxIcom()">
        <SvgIcon style="font-size: 20px;" iconName="qiehuanliebiao" />
      </var-button>
    </template>
  </VarAppBar>
</template>


<style lang='scss' scoped></style>